<template>
    <div>
        <div class="wall-message">
            <p class="title">{{ wallType[id].name }}</p>
            <p class="slogan">{{ wallType[id].slogan }}</p>
            <div class="label">
                <p class="label-list" 
                    :class="{lbselected:nlabel == index}" 
                    v-for="(e,index) in label[id]" :key="index" 
                    @click = "selectNode(index)">
                    {{ e }} 
                </p>
            </div>
            <!-- 留言墙 -->
            <div class="card" v-show="id==0">
                <note-card class="card-inner" 
                    v-for="(e,index) in cards" :key="index" 
                    :note="e" 
                    :class="{cardselected:index == cardSelected}"
                    @toDetail ="selectCard(index)">
                    {{ e }}
                </note-card>
            </div>
            <!-- 照片墙 -->
            <div class="photo" v-show="id==1" >
                <photo-card class="photo-card"
                    v-for="(e,index) in cards" :key="index"
                    :photo="e"
                    @toDetail="selectCard(index)">
                </photo-card>
            </div>
            <!-- 状态 -->
            <div class="none-msg" v-if="isOk == 0">
                <img :src="none[id].url" alt="">
                <p>{{ none[id].msg }}</p>
            </div>
            <!-- 加载动画 -->
            <div class="loading" v-if="isOk == -1">
                <div id="lottile"></div>
                <p class="load">加载中...</p>
            </div>
            <div class="add" :style="{ 'bottom': addBottom + 'px'}" @click="addCard" v-show="!model">
                <span class="iconfont icon-tianjia"></span>
            </div>
            <!-- 没有更多 -->
            <p class="bottom-tip" v-show="isOk == 1">没有更多了...</p>
        </div>
        <model-page :title=title @close="closeModel" :isModel="model">
            <new-card :id="id" :labels="label[id]" v-if="cardSelected == -1" @addClose="closeModel()" @clickbt="newCard"></new-card>
            <card-detil v-if="cardSelected !== -1" :card="cards[cardSelected]"></card-detil>
        </model-page>
        <yk-view :isView="isView" :photos="photoArr" :nowPhoto="cardSelected" @viewSwitch="viewSwitch"></yk-view>
    </div>
</template>

<script>
    import { wallType, label, none } from '@/utils/data.js'
    // 卡片组件
    import NoteCard from '@/components/NoteCard.vue'
    // 添加留言组件
    import ModelPage from '@/components/ModePage.vue'
    // 新建卡片组件
    import NewCard from '@/components/NewCard.vue'
    // 卡片详情组件
    import CardDetil from '@/components/CardDetil.vue'
    // 照片墙组件
    import PhotoCard from '@/components/PhotoCard.vue'
    // 大图预览组件
    import YkView from '@/components/YkView.vue'
    // 动画组件
    import lottie from 'lottie-web'
    //
    import loading from '@/assets/images/system/loading.json'

    // import { photo } from '../../mock/index.js'
    //  导入接口文件
    import { findWallPageApi } from '@/api/index.js'

    export default {
        data() {
            return {
                wallType,
                label,
                nlabel: 0,    // 选中标签
                cards: [],
                addBottom: 30,   // 添加按钮距离底部的高度
                title: '留言',
                model: true,   // 是否关闭弹窗
                cardSelected: -1,   // 选中的卡片
                isView: false,     //是否激活大图视口
                isOk: -1,      // 是否在加载中(-1:加载，0：空，1:没有更多)
                none,
                page: 1,        // 当前页码
                pagesize:10,      // 每页显示条数
                photoArr: []
            }
        },
        methods: {
            // 选择标签
            selectNode(e) {
                this.nlabel = e;
                this.cards = [];
                this.page = 1;
                this.getWallCard(this.id)
            },
            // 监听页面滚动
            scrollBottom() {
                // 获取滚动条距离顶部的高度
                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // 获取可视区域的高度
                let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //
                let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                //
                if (scrollTop + clientHeight + 230 >= scrollHeight) {
                    this.addBottom = scrollTop + clientHeight + 230 - scrollHeight;
                }
                else {
                    this.addBottom = 30;
                }
                //
                if(scrollTop + clientHeight == scrollHeight) {
                    this.getWallCard(this.id);
                    this.isOk = -1;
                }
            },
            // 关闭弹窗
            closeModel() {
                this.model = false;
                if(this.id == 1) {
                    this.isView = false;
                }
            },
            // 选中卡片
            selectCard(e) {
                if(e !== this.cardSelected) {
                    this.cardSelected = e;
                    this.model = true;
                    this.title = '';
                    if(this.id == 1){
                        this.isView = true;
                    }
                }
                else {
                    this.cardSelected = -1;
                    this.model = false;
                    if(this.id == 1){
                        this.isView = false;
                    }
                }
            },
            // 新建卡片
            addCard() {
                this.title = '留言';
                this.model = true;
            },
            //  切换图片
            viewSwitch(e) {
                if(e == 0) {
                    this.cardSelected = this.cardSelected - 1;
                }
                else {
                    this.cardSelected = this.cardSelected + 1;
                }
            },
            //
            newCard(e) {
                // console.log(e);
                this.cards.unshift(e)
                this.closeModel()
            },
            // 加载动画
            loading() {
                this.$nextTick(async () => {
                    const params1 = {
                        container: document.getElementById('lottile'),
                        renderer: 'svg',
                        loop: true,
                        autoplay: true,
                        animationData: loading
                    }
                    lottie.loadAnimation(params1);
                    
                })
            },
            // 获取卡片
            getWallCard(id) {
                if(this.page > 0) {
                    this.isOk = -1;
                    let data = {
                        type: id,
                        page: this.page,
                        pagesize: this.pagesize,
                        userId: 32,
                        label: this.nlabel
                    }
                    // console.log(data);

                    findWallPageApi(data).then((res) => {
                        this.cards = this.cards.concat(res.message);
                        // 设置下一次的page
                        // console.log(res.message);
                        if(res.message.length) {
                            this.page ++;
                            // console.log(this.page);
                        }
                        else {
                            this.page = 0;
                        }
                        if(this.cards.length > 0) {
                            this.isOk = 1;
                            if(this.page == 0) {
                                this.isOk = -1;
                            }
                        }
                        else {
                            this.isOk = 0;
                        }

                        // 将图片单独取出
                        if(this.id == 1) {
                            for(let i = 0; i < this.cards.length; i++) {
                                this.photoArr.push(this.cards[i].src)
                            }
                        }
                    })
                    
                }
            },
            // 获取用户
            getUser() {
                let timer = setInterval(() => {
                    if(this.user) {
                        clearInterval(timer);
                        this.getWallCard(this.id);
                    }
                });
            }
        },
        watch: {
            id() {
                this.model = false;
                this.isView = false;
                this.nlabel = 0;
                this.cardSelected = -1;
            }
        },
        computed: {
            // 留言墙与照片墙的切换
            id() {
                return this.$route.query.id;
            },
            user() {
                return this.$store.state.user;
            }
        },
        components: {
            NoteCard,
            ModelPage,
            NewCard,
            CardDetil,
            PhotoCard,
            YkView,
        },
        mounted() {
            // 监听滚动变化
            window.addEventListener('scroll',this.scrollBottom);
            //  加载动画
            this.loading();
            //  获取用户信息
            this.getUser()
        }, 
        unmounted() {
            // 销毁监听滚动变化
            window.addEventListener('scroll',this.scrollBottom);
        }
    }
</script>


<style lang="less" scoped>
    .wall-message {
        min-height: 650px;
        margin: 52px 0 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .title {
        font-size: 56px;
        color: @gray-0;
        font-weight: 600;
        margin: 46px 0 0 0;
    }

    .slogan {
        font-size: @font-size-14;
        color: @gray-1;
        margin: 8px 0 0 0;
    }

    .label {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 40px 0 0 0;
    }

    .label-list {
        width: auto;
        height: 28px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: @gray-1;
        font-size: @font-size-14;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none;
    }

    .label-list:nth-child(n+2) {
        margin: 0 0 0 25px;
    }

    .lbselected {
        color: @gray-0;
        font-weight: 600;
        border: 1px solid @gray-0;
    }

    .card {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 28px 0 40px 0;
    }

    .card-inner {
        margin: 6px;
    }

    .add {
        width: 56px;
        height: 56px;
        background-color: @gray-0;
        box-shadow: 0 4px 8px 0 rgba( 0, 0, 0, .08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 30px;
        cursor: pointer;
        user-select: none;
        transition: all .3s ease-in-out;
    }

    .icon-tianjia {
        color: @gray-4;
        font-size: 24px;
    }

    .cardselected {
        border: 1px solid @primary-color;
    }

    .photo-card:nth-child(n + 2) {
        margin: 4px 0 0 0;
    }

    .photo {
        width: 88%;
        columns: 5;
        column-gap: 4px;
        margin: 24px 0 0 0;
    }

    .none-msg {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    img {
        display: inline;
    }

    p {
        font-weight: 600;
        letter-spacing: 2px;
        color: @gray-1;
        font-size: @font-size-14;
    }

    .loading {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .load {
        margin: -72px 0 0 0;
    }

    #lottile {
        height: 200px;
    }

    .bottom-tip {
        text-align: center;
        padding: 20px;
    }

</style>